
import { CoordinateType } from '@/defines';//图元端定义引入

/** 黄传鸿组态-存储 */
class HCHHZT {
    
    /* 🏗️================================================================================================ */
    // 🏗️工程
    /* 🏗️================================================================================================ */
    /** 工程列表 */
    projectList: any[];
    /** 工程名称 */
    projectName: string;
    /** 工程键 */
    projectKey: string;
    /** 保存日期 */
    calendar: string;
    /** 当前页面索引 */
    currentPageIndex: number;
    /** 当前页面键 */
    currentPageKey: string;
    /** 图元数据集 */
    pelSet: any[];
    /** 工程中的页面 */
    pages: any[];

    /** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    // 📺 坐标 鼠标
    /** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /** 坐标 */
    coordinate: CoordinateType;
    /** 记录点 */
    recordPoint: CoordinateType[];
    /** 工作状态: 0-无;10-选择;20-绘图;30-编辑;40-移动;50-复制;60-平移*/
    workState: number;
    /** 鼠标左键状态: 0-无;1-按下;2-抬起;*/
    mouseLeftKeyState: number;
    /** 鼠标右键状态: 0-无;1-按下;2-抬起;*/
    mouseRightKeyState: number;
    /** 鼠标滚轮键状态: 0-无;1-按下;2-抬起;*/
    mouseWheelKeyState: number;

    /** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    // 📺 坐标
    /** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /** 元素统计 */
    elementCont = new Map();
    /** 当前画布属性 */
    currentPageAttr = new Map();
    /** 当前图元集 */
    currentPels = new WeakMap();

    /** 🧊静态数据 */
    staticData = {
        // ____________________________________________________________ | 页面
        /** 页面尺寸选项 */
        pageSizeOpt: [
            // 自定义
            {
                label: "自定义",
                size: [100, 100],
                unit: "px",
                value: "custom",
            },
            // 填充图标(10 px × 10 px)
            {
                label: "填充图标(10 px × 10 px)",
                size: [10, 10],
                unit: "px",
                value: "pattern_icon",
            },
            // SVG图标(1024 px × 1024 px)
            {
                label: "SVG图标(1024 px × 1024 px)",
                size: [1024, 1024],
                unit: "px",
                value: "svg_icon",
            },
            // A0(1189 mm × 841 mm)
            {
                label: "A0(1189 mm × 841 mm)",
                size: [1189, 841],
                unit: "mm",
                value: "A0",
            },
            // A1(841 mm × 594 mm)
            {
                label: "A1(841 mm × 594 mm)",
                size: [841, 594],
                unit: "mm",
                value: "A1",
            },
            // A2(594 mm × 420 mm)
            {
                label: "A2(594 mm × 420 mm)",
                size: [594, 420],
                unit: "mm",
                value: "A2",
            },
            // A3(420 mm × 297 mm)
            {
                label: "A3(420 mm × 297 mm)",
                size: [420, 297],
                unit: "mm",
                value: "A3",
            },
            // A4(297 mm × 210 mm)
            {
                label: "A4(297 mm × 210 mm)",
                size: [297, 210],
                unit: "mm",
                value: "A4",
            },
            // A5(210 mm × 148 mm)
            {
                label: "A5(210 mm × 148 mm)",
                size: [210, 148],
                unit: "mm",
                value: "A5",
            },
            // A6(148 mm × 105 mm)
            {
                label: "A6(148 mm × 105 mm)",
                size: [148, 105],
                unit: "mm",
                value: "A6",
            },
            // A7(105 mm × 74 mm)
            {
                label: "A7(105 mm × 74 mm)",
                size: [105, 74],
                unit: "mm",
                value: "A7",
            },
            //_____________________________________________________| 电脑屏幕
            // 800 px × 600 px
            {
                label: "800 px × 600 px",
                size: [800, 600],
                unit: "px",
                value: "s800_600",
            },
            // 1024 px × 768 px
            {
                label: "1024 px × 768 px",
                size: [1024, 768],
                unit: "px",
                value: "s1024_768",
            },
            // 1152 px × 864 px
            {
                label: "1152 px × 864 px",
                size: [1152, 864],
                unit: "px",
                value: "s1152_864",
            },
            // 1280 px × 600 px
            {
                label: "1280 px × 600 px",
                size: [1280, 600],
                unit: "px",
                value: "s1280_600",
            },
            // 1280 px × 720 px
            {
                label: "1280 px × 720 px",
                size: [1280, 720],
                unit: "px",
                value: "s1280_720",
            },
            // 1280 px × 768 px
            {
                label: "1280 px × 768 px",
                size: [1280, 768],
                unit: "px",
                value: "s1280_768",
            },
            // 1280 px × 800 px
            {
                label: "1280 px × 800 px",
                size: [1280, 800],
                unit: "px",
                value: "s1280_800",
            },
            // 1280 px × 960 px
            {
                label: "1280 px × 960 px",
                size: [1280, 960],
                unit: "px",
                value: "s1280_960",
            },
            // 1280 px × 1024 px
            {
                label: "1280 px × 1024 px",
                size: [1280, 1024],
                unit: "px",
                value: "s1280_1024",
            },
            // 1360 px × 768 px
            {
                label: "1360 px × 768 px",
                size: [1360, 768],
                unit: "px",
                value: "s1360_768",
            },
            // 1366 px × 768 px
            {
                label: "1366 px × 768 px",
                size: [1366, 768],
                unit: "px",
                value: "s1366_768",
            },
            // 1400 px × 1050 px
            {
                label: "1400 px × 1050 px",
                size: [1400, 1050],
                unit: "px",
                value: "s1400_1050",
            },
            // 1400 px × 900 px
            {
                label: "1400 px × 900 px",
                size: [1400, 900],
                unit: "px",
                value: "s1400_900",
            },
            // 16:9(1600 px × 900 px)
            {
                label: "16:9(1600 px × 900 px)",
                size: [1600, 900],
                unit: "px",
                value: "s1600_900",
            },
            // 1600 px × 1200 px
            {
                label: "1600 px × 1200 px",
                size: [1600, 1200],
                unit: "px",
                value: "s1600_1200",
            },
            // 1680 px × 1050 px
            {
                label: "1680 px × 1050 px",
                size: [1680, 1050],
                unit: "px",
                value: "s1680_1050",
            },
            // 1792 px × 1344 px
            {
                label: "1792 px × 1344 px",
                size: [1792, 1344],
                unit: "px",
                value: "s1792_1344",
            },
            // 1856 px × 1392 px
            {
                label: "1856 px × 1392 px",
                size: [1856, 1392],
                unit: "px",
                value: "s1856_1392",
            },
            // 页面尺寸[28]1920 px × 1080 px
            {
                label: "1920 px × 1080 px",
                size: [1920, 1080],
                unit: "px",
                value: "s1920_1080",
            },
            // 16:10(1920 px × 1200 px)
            {
                label: "16:10(1920 px × 1200 px)",
                size: [1920, 1200],
                unit: "px",
                value: "s1920_1200",
            },
            // 1920 px × 1280 px
            {
                label: "1920 px × 1280 px",
                size: [1920, 1280],
                unit: "px",
                value: "s1920_1280",
            },
            // 1920 px × 1400 px
            {
                label: "1920 px × 1400 px",
                size: [1920, 1400],
                unit: "px",
                value: "s1920_1400",
            },
            // 2048 px × 1152 px
            {
                label: "2048 px × 1152 px",
                size: [2048, 1152],
                unit: "px",
                value: "s2048_1152",
            },
            // 2048 px × 1536 px
            {
                label: "2048 px × 1536 px",
                size: [2048, 1536],
                unit: "px",
                value: "s2048_1536",
            },
            // 2160 px × 1400 px
            {
                label: "2160 px × 1400 px",
                size: [2160, 1400],
                unit: "px",
                value: "s2160_1400",
            },
            // 2520 px × 1680 px
            {
                label: "2520 px × 1680 px",
                size: [2520, 1680],
                unit: "px",
                value: "s2520_1680",
            },
            // 2560 px × 1400 px
            {
                label: "2560 px × 1400 px",
                size: [2560, 1400],
                unit: "px",
                value: "s2560_1400",
            },
            // 2560 px × 1600 px
            {
                label: "2560 px × 1600 px",
                size: [2560, 1600],
                unit: "px",
                value: "s2560_1600",
            },
            // 2560 px × 1600 px
            {
                label: "2560 px × 1920 px",
                size: [2560, 1920],
                unit: "px",
                value: "s2560_1920",
            },
            // 2560 px × 2048 px
            {
                label: "2560 px × 2048 px",
                size: [2560, 2048],
                unit: "px",
                value: "s2560_2048",
            },
            // 3120 px × 2080 px
            {
                label: "3120 px × 2080 px",
                size: [3120, 2080],
                unit: "px",
                value: "s3120_2080",
            },
            //_____________________________________________________| 手机尺寸
            // iPhone SE (667 px × 375 px)
            {
                label: "iPhone SE (667 px × 375 px)",
                size: [667, 375],
                unit: "px",
                value: "iPhone_SE",
            },
            // iPhone XR (896 px × 414 px)
            {
                label: "iPhone XR (896 px × 414 px)",
                size: [896, 414],
                unit: "px",
                value: "iPhone_XR",
            },
            // iPhone 12 Pro (844 px × 390 px)
            {
                label: "iPhone 12 Pro (844 px × 390 px)",
                size: [844, 390],
                unit: "px",
                value: "iPhone_12_Pro",
            },
        ],
        /** 页面方向选项  */
        pageOrientationOpt: [
            {
                label: "水平",
                value: "PageHorizontal",
            },
            {
                label: "竖向",
                value: "PageVertical",
            },
        ],
        /** 页面精度选项  */
        pageAccuracyOpt: [
            {
                label: "0级 1.0",
                value: "0级",
            },
            {
                label: "1级 0.1",
                value: "1级",
            },
            {
                label: "2级 0.01",
                value: "2级",
            },
            {
                label: "3级 0.001",
                value: "3级",
            },
            {
                label: "4级 0.0001",
                value: "4级",
            },
            {
                label: "5级 0.00001",
                value: "5级",
            },
            {
                label: "6级 0.000001",
                value: "6级",
            },
            {
                label: "7级 0.0000001",
                value: "7级",
            },
            {
                label: "8级 0.00000001",
                value: "8级",
            },
        ],
        // ____________________________________________________________| 颜色
        /** 颜色选项卡 */
        colorOpt: [
            "rgb(255, 0, 0)",
            "rgb(255, 255, 0)",
            "rgb(0, 255, 0)",
            "rgb(0, 255, 255)",
            "rgb(0, 0, 255)",
            "rgb(255, 0, 255)",
            "rgb(204, 102, 0)",
            "rgba(255, 255, 255,0)",
            "rgb(255, 255, 255)",
            "rgb(192, 192, 192)",
            "rgb(173, 173, 173)",
            "rgb(132, 132, 132)",
            "rgb(128, 128, 128)",
            "rgb(100, 100, 100)",
            "rgb(50, 50, 50)",
            "rgb(0, 0, 0)",
            "rgb(238, 10, 36)",
            "rgb(208, 48, 80)",
            "rgb(0, 17, 255)",
            "rgb(0, 7, 100)",
            "rgb(0, 67, 172)",
            "rgb(0, 84, 0)",
            "rgb(160, 160, 160)",
            "rgb(214, 214, 214)",
        ],
        // ____________________________________________________________ | 图元
        /** 线端点选项 */
        lineCapOpt: [
            // 粗大
            {
                label: "粗",
                value: "butt",
            },
            // 圆滑
            {
                label: "圆滑",
                value: "round",
            },
            //平整
            {
                label: "平整",
                value: "square",
            },
        ],
        /** 线链接选项 */
        linejoinOpt: [
            // 尖
            {
                label: "尖",
                value: "miter",
            },
            // 圆
            {
                label: "圆",
                value: "round",
            },
            //平
            {
                label: "平",
                value: "bevel",
            },
        ],
        /** 填充选项:1-颜色填充;2-图案填充;3-线性渐变填充;4-放射渐变填充;*/
        fillOpt: [
            // 颜色填充 Color
            {
                label: "颜色填充",
                value: 1,
            },
            // 图案填充 Pattern
            {
                label: "图案填充",
                value: 2,
            },
            // 线性渐变填充 Linear
            {
                label: "线性渐变填充",
                value: 3,
            },
            // 放射渐变填充 Radial
            {
                label: "放射渐变填充",
                value: 4,
            },
        ],
        /** 图案填充:
         * 1-颜色填充;
         * 2-图案填充;
         * 3-线性渐变填充;
         * 4-放射渐变填充;
         * */
        patternFillOpt: [
            // 颜色填充 Color
            {
                label: "点",
                value: 1,
            },
            {
                label: "方格",
                value: 2,
            },
            {
                label: "长方格",
                value: 3,
            },
            {
                label: "水平线",
                value: 4,
            },
            {
                label: "垂直线",
                value: 4,
            },
        ],
        /** 路径文本位置选项:1-x[];2-text-anchor[];3-startOffset[]*/
        pathTextPlaceOpt: [
            // x
            {
                label: "水平位置",
                value: 1,
            },
            // text-anchor
            {
                label: "锚点",
                value: 2,
            },
            // startOffset
            {
                label: "开始位置偏移",
                value: 3,
            },
        ],
        // ____________________________________________________________| 格栅
        /** 格栅模式选项:1_无格栅;2_点格栅;3_方格; */
        gridModelOpt: [
            //1_无格栅
            {
                label: "无格栅",
                value: 1,
            },
            //2_点格栅
            {
                label: "点格栅",
                value: 2,
            },
            // 3_方格
            {
                label: "方格",
                value: 3,
            },
        ],
        /** 格栅样式选项:1_像素尺寸;2_均分画布;3_按宽高均分画布;*/
        gridStyleOpt: [
            // 1_像素尺寸
            {
                label: "像素尺寸",
                value: 1,
            },
            // 2_均分画布
            {
                label: "均分画布",
                value: 2,
            },
            // 3_按宽高均分画布
            {
                label: "按宽高均分画布",
                value: 3,
            },
        ],
        /** 捕捉选项 */
        catchOpt: [
            {
                label: "端点",
                value: "CatchStart",
            },
            {
                label: "中心点",
                value: "catchMidle",
            },
            {
                label: "终点",
                value: "CatchEnd",
            },
            {
                label: "上左",
                value: "catchUpLeft",
            },
            {
                label: "上",
                value: "catchUp",
            },
            {
                label: "上右",
                value: "catchUpRight",
            },
            {
                label: "右",
                value: "catchRight",
            },
            {
                label: "下右",
                value: "catchDownRight",
            },
            {
                label: "Catch下右",
                value: "catchDown",
            },
            {
                label: "下左",
                value: "catchDownLeft",
            },
        ],

        // ____________________________________________________________| 动画
        /** 发送数据类型:1_文本;2_颜色 */
        sendTypeOpt: [
            {
                label: "文本数据",
                value: 1,
            },
            {
                label: "颜色数据",
                value: 2,
            },
        ],
        /** 发送数据集:1-图元数据;2-发送数据 */
        sendSetOpt: [
            {
                label: "图元数据",
                value: 1,
            },
            {
                label: "发送数据",
                value: 2,
            },
        ],
        /** 请求类型选项:1_GET;2_POST;3_PUSH */
        requestTypeOpt: [
            {
                label: "GET请求",
                value: 1,
            },
            {
                label: "POST请求",
                value: 2,
            },
            {
                label: "PUSH请求",
                value: 3,
            },
        ],
        /** 请求数周期选项:1_0.1秒; 2_0.5秒;3_1秒;4_1分钟;5_1小时; 6_1天;*/
        requestCycelOpt: [
            {
                label: "0.1秒",
                value: 1,
            },
            {
                label: "0.5秒",
                value: 2,
            },
            {
                label: "1秒",
                value: 3,
            },
            {
                label: "1分钟",
                value: 4,
            },
            {
                label: "1小时",
                value: 5,
            },
            {
                label: "1天",
                value: 6,
            },
        ],
        /** 变量类型选项:0_JSON数据;1_单行文本;2_颜色;3_多行文本;4_路由 */
        valTypeOpt: [
            {
                label: "JSON数据",
                value: 0,
            },
            {
                label: "单行文本",
                value: 1,
            },
            {
                label: "颜色数据",
                value: 2,
            },
            {
                label: "多行文本",
                value: 3,
            },
            // 路由
            {
                label: "路由",
                value: 4,
            },
        ],
        /** 设备数据类型:0_布尔;1_8位;2_16位;3_16位;4_32位;5_字符; */
        equipDataTypeOpt: [
            // 布尔
            {
                label: "布尔",
                value: 0,
            },
            // 8位
            {
                label: "8位",
                value: 1,
            },
            // 16位
            {
                label: "16位",
                value: 3,
            },
            // 32位
            {
                label: "32位",
                value: 4,
            },
            // 字符
            {
                label: "字符",
                value: 5,
            },

        ],
        /** 读写选项:0_读;1_写; */
        readWriteOpt: [
            // 读
            {
                label: "读",
                value: 0,
            },
            // 写
            {
                label: "写",
                value: 1,
            },
        ],
        /** 动画模式选项:1_值动画;2_值转换动画;3_自动画; */
        anModelOpt: [
            // 值动画
            {
                label: "值动画",
                value: 1,
            },
            // 值转换动画
            {
                label: "值转换动画",
                value: 2,
            },
            // 自动画
            {
                label: "自动画",
                value: 3,
            },
        ],
        /** 子动画链接_选项:1_图元数据;2_设备数据 */
        subAnLinkOpt: [
            {
                label: "图元数据",
                value: 1,
            },
            {
                label: "设备数据",
                value: 2,
            },
        ],
        /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
        useParentSetOpt: [
            {
                label: "父数据",
                value: 0,
            },
            {
                label: "图元数据",
                value: 1,
            },
            {
                label: "设备数据",
                value: 2,
            },
        ],
        /** 使用子数据_选项: 1_图元数据;2_设备数据 */
        useSubSetOpt: [
            {
                label: "图元数据",
                value: 1,
            },
            {
                label: "设备数据",
                value: 2,
            },
        ],
        /** 使用值选项:1_起始和结束;2_多值; */
        useValOpt: [
            {
                label: "起始和结束",
                value: 1,
            },
            {
                label: "多值",
                value: 2,
            }
        ],
        /** 动画重复选项:0_无;1_无限循环动画;2_按次重复动画;3_按秒重复动画;4_同步动画 */
        anRepeatOpt: [
            {
                label: "无",
                value: 0,
            },
            {
                label: "无限循环动画",
                value: 1,
            },
            {
                label: "按次重复动画",
                value: 2,
            },
            {
                label: "按秒重复动画",
                value: 3,
            },
            {
                label: "同步动画",
                value: 3,
            },
        ],
        /** CSS动画_选项 */
        cssAnOpt: [
            {
                label: "淡入",
                value: "fadeIn",
            },
            {
                label: "向下淡入",
                value: "fadeInDown",
            },
            {
                label: "向下快速淡入",
                value: "fadeInDownBig",
            },
            {
                label: "向右淡入",
                value: "fadeInLeft",
            },
            {
                label: "向右快速淡入",
                value: "fadeInLeftBig",
            },
            {
                label: "向左淡入",
                value: "fadeInRight",
            },
            {
                label: "向左快速淡入",
                value: "fadeInRightBig",
            },
            {
                label: "向上淡入",
                value: "fadeInUp",
            },
            {
                label: "向上快速淡入",
                value: "fadeInUpBig",
            },
            {
                label: "淡出",
                value: "fadeOut",
            },
            {
                label: "向下淡出",
                value: "fadeOutDown",
            },
            {
                label: "向下快速淡出",
                value: "fadeOutDownBig",
            },
            {
                label: "向左淡出",
                value: "fadeOutLeft",
            },
            {
                label: "向左快速淡出",
                value: "fadeOutLeftBig",
            },
            {
                label: "向右淡出",
                value: "fadeOutRight",
            },
            {
                label: "向右快速淡出",
                value: "fadeOutRightBig",
            },
            {
                label: "向上淡出",
                value: "fadeOutUp",
            },
            {
                label: "向上快速淡出",
                value: "fadeOutUpBig",
            },
            {
                label: "弹跳进入",
                value: "bounceIn",
            },
            {
                label: "向下弹跳进入",
                value: "bounceInDown",
            },
            {
                label: "向右弹跳进入",
                value: "bounceInLeft",
            },
            {
                label: "向左弹跳进入",
                value: "bounceInRight",
            },
            {
                label: "向上弹跳进入",
                value: "bounceInUp",
            },
            {
                label: "弹跳退出",
                value: "bounceOut",
            },
            {
                label: "向下弹跳退出",
                value: "bounceOutDown",
            },
            {
                label: "向左弹跳退出",
                value: "bounceOutLeft",
            },
            {
                label: "向右弹跳退出",
                value: "bounceOutRight",
            },
            {
                label: "向上弹跳退出",
                value: "bounceOutUp",
            },
            {
                label: "放大进入",
                value: "zoomIn",
            },
            {
                label: "向下放大进入",
                value: "zoomInDown",
            },
            {
                label: "向右放大进入",
                value: "zoomInLeft",
            },
            {
                label: "向左放大进入",
                value: "zoomInRight",
            },
            {
                label: "向上放大进入",
                value: "zoomInUp",
            },
            {
                label: "缩小退出",
                value: "zoomOut",
            },
            {
                label: "向下缩小退出",
                value: "zoomOutDown",
            },
            {
                label: "向左缩小退出",
                value: "zoomOutLeft",
            },
            {
                label: "向右缩小退出",
                value: "zoomOutRight",
            },
            {
                label: "向上缩小退出",
                value: "zoomOutUp",
            },
            {
                label: "顺时针旋转进入",
                value: "rotateIn",
            },
            {
                label: "从左往下旋入",
                value: "rotateInDownLeft",
            },
            {
                label: "从右往下旋入",
                value: "rotateInDownRight",
            },
            {
                label: "从左往上旋入",
                value: "rotateInUpLeft",
            },
            {
                label: "从右往上旋入",
                value: "rotateInUpRight",
            },
            {
                label: "顺时针旋转退出",
                value: "rotateOut",
            },
            {
                label: "向左下旋出",
                value: "rotateOutDownLeft",
            },
            {
                label: "向右下旋出",
                value: "rotateOutDownRight",
            },
            {
                label: "向左上旋出",
                value: "rotateOutUpLeft",
            },
            {
                label: "向右上旋出",
                value: "rotateOutUpRight",
            },
            {
                label: "水平翻转进入",
                value: "flipInX",
            },
            {
                label: "垂直翻转进入",
                value: "flipInY",
            },
            {
                label: "水平翻转退出",
                value: "flipOutX",
            },
            {
                label: "垂直翻转退出",
                value: "flipOutY",
            },

            {
                label: "弹跳",
                value: "bounce",
            },
            {
                label: "闪烁",
                value: "flash",
            },
            {
                label: "脉冲",
                value: "pulse",
            },
            {
                label: "橡皮筋",
                value: "rubberBand",
            },
            {
                label: "左右弱晃动",
                value: "shake",
            },
            {
                label: "上下摆动",
                value: "swing",
            },
            {
                label: "缩放摆动",
                value: "tada",
            },
            {
                label: "左右强晃动",
                value: "wobble",
            },
            {
                label: "拉伸抖动",
                value: "jello",
            },
        ],
        /** CSS动画延时_选项 */
        cssAnDelayOpt: [
            {
                label: "延时2秒",
                value: "delay_2s",
            },
            {
                label: "延时3秒",
                value: "delay_3s",
            },
            {
                label: "延时4秒",
                value: "delay_4s",
            },
            {
                label: "延时5秒",
                value: "delay_5s",
            },
        ],
        /** CSS动画加速_选项 */
        cssAnSpeedOpt: [
            {
                label: "加速2秒",
                value: "slow",
            },
            {
                label: "加速3秒",
                value: "slower",
            },
            {
                label: "加速800ms",
                value: "fast",
            },
            {
                label: "加速500ms",
                value: "faster",
            },
        ],
        /** CSS动画循环_次数 */
        cssAnLoopOpt: [
            {
                label: "循环1次",
                value: "1",
            },
            {
                label: "循环2次",
                value: "2",
            },
            {
                label: "循环3次",
                value: "3",
            },
            {
                label: "循环",
                value: "infinite",
            },
        ],

        // ____________________________________________________________| DIV图元
        /** 边框样式选项 */
        borderStyleOpt: [
            {
                label: "无边框",
                value: "none",
            },
            {
                label: "单实线",
                value: "solid",
            },
            {
                label: "虚线",
                value: "dashed",
            },
            {
                label: "点线",
                value: "dotted",
            },
            {
                label: "双实线",
                value: "double",
            }
        ],
        /** 对齐方式 */
        textAlignOpt: [
            {
                label: "左对齐",
                value: "left",
            },
            {
                label: "居中对齐",
                value: "center",
            },
            {
                label: "右对齐",
                value: "right",
            },
        ],
        // ____________________________________________________________| Svg文本
        /** 文本字体 */
        fontFamilyOpt: [
            {
                label: "Arial",
                value: "Arial",
            },
            {
                label: "等线",
                value: "等线",
            },
            {
                label: "黑体",
                value: "黑体",
            },
            {
                label: "仿宋",
                value: "仿宋",
            },
            {
                label: "楷体",
                value: "楷体",
            },
        ],
        /** 对齐方式 */
        textAnchorOpt: [
            // 左对齐
            {
                label: "左对齐",
                value: "start",
            },
            // 中间对齐
            {
                label: "中间对齐",
                value: "middle",
            },
            // 右对齐
            {
                label: "右对齐",
                value: "end",
            },
        ],
        /** 划线设置 */
        textDecorationOpt: [
            // 无划线
            {
                label: "无划线",
                value: "none",
            },
            // 下划线
            {
                label: "下划线",
                value: "underline",
            },
            // 上划线
            {
                label: "上划线",
                value: "overline",
            },
            // 删除线
            {
                label: "删除线",
                value: "line_through",
            },
        ],
        /** 文本样式 */
        fontStyleOpt: [
            {
                label: "正常",
                value: "normal",
            },
            {
                label: "斜体",
                value: "italic",
            },
        ],
        /** 文本粗细 */
        fontWeightOpt: [
            {
                label: "细",
                value: "normal",
            },
            {
                label: "粗",
                value: "bold",
            },
        ]
    };
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🌽🌽构造函数
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /**🌽🌽构造函数 */
    constructor() {
        /* 🏗️================================================================================================ */
        // 🏗️工程
        /* 🏗️================================================================================================ */
        /** 工程列表 */
        this.projectList = [];
        /** 工程名称 */
        this.projectName = "默认工程";
        /** 工程键 */
        this.projectKey = "defaultPro";
        /** 保存日期 */
        this.calendar = "2023年7月3日11:30:06";
        /** 当前页面索引 */
        this.currentPageIndex = 0;
        /** 当前页面键 */
        this.currentPageKey = 'page0';
        /** 图元数据集 */
        this.pelSet = [];
        /** 工程中的页面 */
        this.pages = [
            {
                label: '页面0',
                key: 'page0',
                /** 画布属性 */
                canvasAttr: {
                    // 🦢 页面
                    /** 页面名称 */
                    pageName: "页面0",
                    /** 页面键 */
                    pageKey: "page0",
                    /** 页面尺寸 */
                    pageSize: "svg_icon",
                    /** 页面方向 */
                    pageOrientation: "PageHorizontal",
                    /** 页面精度 */
                    pageAccuracy: "0级",
                    /** 页面单位 */
                    pageUnit: "px",

                    // 🦢 画布
                    /** 画布缩放 */
                    canvasScale: 1,
                    /** 画布背景色 */
                    canvasBackColor: "rgba(0,0,0,1)",
                    /** 画布宽度 */
                    canvasWidth: 1024,
                    /** 画布高度 */
                    canvasHeight: 1024,
                    // 🦢 格栅
                    /** 格栅模式选项:1-无格栅;2-点格栅;3-方格; */
                    gridModel: 1,
                    /** 格栅样式选项:1-像素尺寸;2-均分画布;3-按宽高均分画布;*/
                    gridStyle: 1,
                    /** 格栅间距 */
                    gridSpace: 10,
                    /** 宽等分数 */
                    gridBisectionWidthCont: 10,
                    /** 宽等分数 */
                    gridBisectionHeightCont: 10,
                    /** 格栅点颜色 */
                    gridDotColor: "rgba(255,255,255,1)",
                    /** 小格颜色 */
                    gridColorMini: "rgb(255,255,255)",
                    /** 大格颜色 */
                    gridColorMax: "rgb(255,255,255)",
                    /** 格栅宽度 */
                    gridWidth: 10,
                    /** 格栅高度 */
                    gridHeight: 10,

                    // 🦢 光标
                    /** 显示光标 */
                    isShowCursor: false,
                    /** 光标颜色 */
                    cursorColor: "rgb(214,214,214)",
                    /** 光标盒子尺寸 */
                    cursorBoxSize: 30,
                    /** 光标长度 */
                    cursorLang: 1600,
                    /** 光标线宽度 */
                    cursorLineWidth: 1,

                    // 🦢 标尺
                    ruleLineColor: 'rgba(0,0,255,1)'
                },
                /** 图元数据 */
                pelSet: [],
            }
        ];
        this.initLayout();
        this.initPatge();//页面初始化
        this.initPelElement();       //🪢初始化图元元素
        Object.seal(this.staticData);//🧊密封-静态数据

        /** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
        // 📺 坐标
        /** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
        this.coordinate = { x: 0, y: 0 };//坐标 
        this.recordPoint = <CoordinateType[]>[];//记录点
        this.workState = 0;//工作状态
        this.mouseLeftKeyState = 0;//鼠标左键状态
        this.mouseRightKeyState = 0;//鼠标右键状态
        this.mouseWheelKeyState = 0;//鼠标滚轮键状态
    }

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 初始化
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /** 🪢布局初始化 */
    initLayout() {
        console.log("🪢布局初始化")
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // 🐸 格栅
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        /** 格栅 */
        // let Hpanel = document.querySelector(".h_panel") as HTMLDivElement
        // let Hgrid = document.createElement("div");
        // Hgrid.id = 'h_panel_grid';
        // Hpanel.appendChild(Hgrid)

    };

    /** 🪢页面初始化 */
    initPatge() {
        console.log("🪢页面初始化")
        // 🦢 页面
        /** 页面名称 */
        this.currentPageAttr.set('pageName', this.getUUID());
        /** 页面键 */
        this.currentPageAttr.set('pageKey', this.getUUID());
        /** 页面尺寸 */
        this.currentPageAttr.set('pageSize', "svg_icon");
        /** 页面方向:0-水平;1-垂直 */
        this.currentPageAttr.set('pageOrientation', 0);
        /** 页面精度 */
        this.currentPageAttr.set('pageAccuracy', "0级");
        /** 页面单位 */
        this.currentPageAttr.set('pageUnit', "px");

        // 🦢 画布
        /** 画布缩放 */
        this.currentPageAttr.set('canvasScale', 1);
        /** 画布背景色 */
        this.currentPageAttr.set('canvasBackColor', "rgba(0,0,0,1)");
        /** 画布宽度 */
        this.currentPageAttr.set('canvasWidth', 1024);
        /** 画布高度 */
        this.currentPageAttr.set('canvasHeight', 1024);

        // 🦢 格栅
        /** 格栅模式选项:1-无格栅;2-点格栅;3-方格; */
        this.currentPageAttr.set('gridModel', 2);
        /** 格栅样式选项:1-像素尺寸;2-均分画布;3-按宽高均分画布; */
        this.currentPageAttr.set('gridStyle', 1);
        /** 格栅间距 */
        this.currentPageAttr.set('gridSpace', 10);
        /** 宽等分数 */
        this.currentPageAttr.set('gridBisectionWidthCont', 10);
        /** 宽等分数 */
        this.currentPageAttr.set('gridBisectionHeightCont', 10);
        /** 格栅点颜色 */
        this.currentPageAttr.set('gridDotColor', "rgba(255,255,255,1)");
        /** 小格颜色 */
        this.currentPageAttr.set('gridColorMini', "rgb(50,50,50)");
        /** 大格颜色 */
        this.currentPageAttr.set('gridColorMax', "rgb(100,100,100)");
        /** 格栅宽度 */
        this.currentPageAttr.set('gridWidth', 10);
        /** 格栅高度 */
        this.currentPageAttr.set('gridHeight', 10);
        /** 格栅旋转 */
        this.currentPageAttr.set('gridRotate', 0);

        // 🦢 光标
        /** 显示光标 */
        this.currentPageAttr.set('isShowCursor', true);
        /** 光标颜色 */
        this.currentPageAttr.set('cursorColor', "rgb(214,214,214)");
        /** 光标盒子尺寸 */
        this.currentPageAttr.set('cursorBoxSize', 30);
        /** 光标长度 */
        this.currentPageAttr.set('cursorLang', 1600);
        /** 光标线宽度 */
        this.currentPageAttr.set('cursorLineWidth', 1);

        // 🦢 标尺
        /** 显示标尺 */
        this.currentPageAttr.set('isShowRuler', true);
        /** 标尺小线颜色 */
        this.currentPageAttr.set('rulerSmallLineColor', 'rgba(255,0,0,1)');
        /** 标尺大线颜色 */
        this.currentPageAttr.set('rulerBigLineColor', 'rgba(0,255,0,1)');
        /** 标尺间距 */
        this.currentPageAttr.set('rulerSpan', 5);
        /** 标尺线宽度 */
        this.currentPageAttr.set('rulerLineWidth', 5);
        /** 标尺宽度 */
        this.currentPageAttr.set('rulerWidth', 2);
        /** 标尺高度 */
        this.currentPageAttr.set('rulerHeight', 1);

    };

    /** 🪢初始化图元元素 */
    initPelElement() {
        this.elementCont.set('penContainerCont', 0);//笔筒_数量
        this.elementCont.set('penCont', 0);//画笔_数量
        this.elementCont.set('blockGroupCont', 0);//块组_数量
        this.elementCont.set('blockCont', 0);//块_数量
        this.elementCont.set('pageCont', 0);//页面_数量
        this.elementCont.set('horizontaLineCont', 0);//水平线_数量
        this.elementCont.set('verticalLineCont', 0);//垂直线_数量
        this.elementCont.set('slantLineCont', 0);//斜线_数量
        this.elementCont.set('circleCont', 0);//圆_数量
        this.elementCont.set('ellipseCont', 0);//椭圆_数量
        this.elementCont.set('rectangleCont', 0);//矩形_数量
        this.elementCont.set('arcCont', 0);//三点弧线_数量
        this.elementCont.set('circlePolygonCont', 0);//圆分多边形_数量
        this.elementCont.set('polygonCont', 0);//多边形_数量
        this.elementCont.set('polylineCont', 0);//多边形_数量
        this.elementCont.set('pathCont', 0);//多边形_数量
        this.elementCont.set('singleTextCont', 0);//单行文本_数量
        this.elementCont.set('multipleTextCont', 0);//多行文本_数量
        this.elementCont.set('imageCont', 0);//图片_数量
    };

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 公共函数
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /** 更改画布尺寸 */
    changeCanvasSize() {
        console.log("更改画布尺寸")
        /** 画布宽度 */
        let canvasWidth = this.currentPageAttr.get('canvasWidth');
        /** 画布高度 */
        let canvasHeight = this.currentPageAttr.get('canvasHeight');
        /** 画布缩放 */
        let canvasScale = this.currentPageAttr.get('canvasScale');
        /** 画布 */
        let panel_canvas = document.querySelector('#panel_canvas') as HTMLDivElement
        panel_canvas.style.width = `${canvasWidth * canvasScale}px`
        panel_canvas.style.height = `${canvasHeight * canvasScale}px`

        /** 显示标尺 */
        let isShowRuler = Boolean(this.currentPageAttr.get('isShowRuler'));
        if (isShowRuler) {
            this.drawRuler();//绘制-标尺
        }

        /** 显示光标 */
        let isShowCursor = Boolean(this.currentPageAttr.get('isShowCursor'));
        if (isShowCursor) {
            this.drawCursor();//绘制-光标
        }

        /** 格栅模式选项:1-无格栅;2-点格栅;3-方格; */
        let gridModel = Number(this.currentPageAttr.get('gridModel'));
        if (gridModel >= 1) {
            this.drawGrid();//绘制-格栅
        }
    };

    /** 绘制-标尺 */
    drawRuler() {
        console.log("✍ 绘制标尺")

        // let Hruler = document.createElement('canvas') as HTMLCanvasElement;
        // const ctx = Hruler.getContext('2d') as CanvasRenderingContext2D;

        /** 画布缩放 */
        let canvasScale = Number(this.currentPageAttr.get('canvasScale'));
        /** 画布宽度 */
        let canvasWidth = Number(this.currentPageAttr.get('canvasWidth'));
        /** 画布高度 */
        let canvasHeight = Number(this.currentPageAttr.get('canvasHeight'));
        /** 标尺小线颜色 */
        let rulerSmallColor = String(this.currentPageAttr.get('rulerSmallLineColor'));
        /** 标尺大线颜色 */
        let rulerBigLineColor = String(this.currentPageAttr.get('rulerBigLineColor'));
        /** 标尺间距 */
        let rulerSpan = Number(this.currentPageAttr.get('rulerSpan'));
        /** 标尺线宽度 */
        let rulerLineWidth = Number(this.currentPageAttr.get('rulerLineWidth'));
        /** 标尺宽度 */
        let rulerWidth = Number(this.currentPageAttr.get('rulerWidth'));
        /** 标尺高度 */
        let rulerHeight = Number(this.currentPageAttr.get('rulerHeight'));


    };

    /** 绘制-光标 */
    drawCursor() {
        console.log("✍ 绘制光标");
        let Hpanel = document.querySelector('#h_panel') as HTMLDivElement;
        Hpanel.style.cursor = 'none';//十字光标

        try {
            let HSvgCursor = document.querySelector('#h_svg_cursor') as SVGElement;
            Hpanel.removeChild(HSvgCursor);
        } catch (error) {

        }

        /** 画布缩放 */
        let canvasScale = Number(this.currentPageAttr.get('canvasScale'));
        /** 画布宽度 */
        let canvasWidth = Number(this.currentPageAttr.get('canvasWidth'));
        /** 画布高度 */
        let canvasHeight = Number(this.currentPageAttr.get('canvasHeight'));
        /** 光标颜色 */
        let cursorColor = String(this.currentPageAttr.get('cursorColor'));
        /** 光标盒子尺寸 */
        let cursorBoxSize = Number(this.currentPageAttr.get('cursorBoxSize'));
        /** 光标长度 */
        let cursorLang = Number(this.currentPageAttr.get('cursorLang'));
        /** 光标线宽度 */
        let cursorLineWidth = Number(this.currentPageAttr.get('cursorLineWidth'));
        /** 屏幕坐标x */
        let screenX = this.coordinate.x;
        /** 屏幕坐标y */
        let screenY = this.coordinate.y;

        let svgNS = 'http://www.w3.org/2000/svg'; //命名空间
        let oSvg = document.createElementNS(svgNS, 'svg'); //创建了一个svg元素
        oSvg.setAttribute('id', 'h_svg_cursor');
        oSvg.setAttribute('xmlns', svgNS);
        oSvg.setAttribute('version', '1.1');
        oSvg.setAttribute('viewBox', `0 0 ${canvasWidth} ${canvasHeight}`);
        oSvg.setAttribute('style', `position: absolute;top: 0px;left: 0px;width: ${canvasWidth * canvasScale};height: ${canvasHeight * canvasScale};`);
        let oG = document.createElementNS(svgNS, 'g');
        oG.setAttribute('style', `transform:scale(${canvasScale})`);

        // 工作状态 0-无;10-选择;20-绘图;30-编辑;40-移动;50-复制
        if (
            this.workState === 10 ||
            this.workState === 20 ||
            this.workState === 40 ||
            this.workState === 50 ||
            this.workState === 70
        ) {
            /**光标_水平线*/
            let hLine = document.createElementNS(svgNS, 'line');
            hLine.setAttribute('x1', `${screenX - cursorLang}`);
            hLine.setAttribute('y1', `${screenY}`);
            hLine.setAttribute('x2', `${screenX + cursorLang}`);
            hLine.setAttribute('y2', `${screenY}`);
            hLine.setAttribute('stroke', `${cursorColor}`);
            hLine.setAttribute('stroke-width', `${cursorLineWidth}`);

            /**光标_垂直线  */
            let vLine = document.createElementNS(svgNS, 'line');
            vLine.setAttribute('x1', `${screenX}`);
            vLine.setAttribute('y1', `${screenY - cursorLang}`);
            vLine.setAttribute('x2', `${screenX}`);
            vLine.setAttribute('y2', `${screenY + cursorLang}`);
            vLine.setAttribute('stroke', `${cursorColor}`);
            vLine.setAttribute('stroke-width', `${cursorLineWidth}`);

            oG.appendChild(hLine);
            oG.appendChild(vLine);
            oSvg.appendChild(oG);
            Hpanel.appendChild(oSvg);
        }
        // 十字+框光标
        if (this.workState === 0) {
            /**水平线_左边 */
            let leftLine = document.createElementNS(svgNS, 'line');
            leftLine.setAttribute('x1', `${screenX - cursorBoxSize / 2}`);
            leftLine.setAttribute('y1', `${screenY}`);
            leftLine.setAttribute('x2', `${screenX - cursorLang}`);
            leftLine.setAttribute('y2', `${screenY}`);
            leftLine.setAttribute('stroke', `${cursorColor}`);
            leftLine.setAttribute('stroke-width', `${cursorLineWidth}`);

            /**水平线_右边 */
            let rightLine = document.createElementNS(svgNS, 'line');
            rightLine.setAttribute('x1', `${screenX + cursorBoxSize / 2}`);
            rightLine.setAttribute('y1', `${screenY}`);
            rightLine.setAttribute('x2', `${screenX + cursorLang}`);
            rightLine.setAttribute('y2', `${screenY}`);
            rightLine.setAttribute('stroke', `${cursorColor}`);
            rightLine.setAttribute('stroke-width', `${cursorLineWidth}`);

            /**垂直线_上边 */
            let topLine = document.createElementNS(svgNS, 'line');
            topLine.setAttribute('x1', `${screenX}`);
            topLine.setAttribute('y1', `${screenY - cursorBoxSize / 2}`);
            topLine.setAttribute('x2', `${screenX}`);
            topLine.setAttribute('y2', `${screenY - cursorLang}`);
            topLine.setAttribute('stroke', `${cursorColor}`);
            topLine.setAttribute('stroke-width', `${cursorLineWidth}`);

            /**垂直线_下边 */
            let bottomLine = document.createElementNS(svgNS, 'line');
            bottomLine.setAttribute('x1', `${screenX}`);
            bottomLine.setAttribute('y1', `${screenY + cursorBoxSize / 2}`);
            bottomLine.setAttribute('x2', `${screenX}`);
            bottomLine.setAttribute('y2', `${screenY + cursorLang}`);
            bottomLine.setAttribute('stroke', `${cursorColor}`);
            bottomLine.setAttribute('stroke-width', `${cursorLineWidth}`);

            /**光标中心_矩形 */
            let centerRect = document.createElementNS(svgNS, 'rect');
            centerRect.setAttribute('x', `${screenX - cursorBoxSize / 2}`);
            centerRect.setAttribute('y', `${screenY - cursorBoxSize / 2}`);
            centerRect.setAttribute('width', `${cursorBoxSize}px`);
            centerRect.setAttribute('height', `${cursorBoxSize}px`);
            centerRect.setAttribute('stroke', `${cursorColor}`);
            centerRect.setAttribute('stroke-width', `${cursorLineWidth}`);
            centerRect.setAttribute('fill', "rgba(255, 255, 255, 0)");

            oG.appendChild(leftLine);
            oG.appendChild(rightLine);
            oG.appendChild(topLine);
            oG.appendChild(bottomLine);
            oG.appendChild(centerRect);
            oSvg.appendChild(oG);
            Hpanel.appendChild(oSvg);
        }

    };

    /** 绘制-格栅 */
    drawGrid() {
        console.log("✍ 绘制格栅")
        let Hpanel = document.querySelector('#h_panel') as HTMLDivElement;

        let gridStyleVal = ''
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // 🐸 转储、建立参数
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        /** 画布背景颜色 */
        let canvasBackColor = String(this.currentPageAttr.get('canvasBackColor'));
        /** 画布缩放 */
        let canvasScale = Number(this.currentPageAttr.get('canvasScale'));
        /** 画布宽度 */
        let canvasWidth = Number(this.currentPageAttr.get('canvasWidth'));
        /** 画布高度 */
        let canvasHeight = Number(this.currentPageAttr.get('canvasHeight'));
        /** 格栅模式选项:1-无格栅;2-点格栅;3-方格; */
        let gridModel = Number(this.currentPageAttr.get('gridModel'));
        /** 格栅样式选项:1-像素尺寸;2-均分画布;3-按宽高均分画布;*/
        let gridStyle = Number(this.currentPageAttr.get('gridStyle'));
        /** 格栅间距 */
        let gridSpace = Number(this.currentPageAttr.get('gridSpace'));
        /** 格栅点颜色 */
        let gridDotColor = String(this.currentPageAttr.get('gridDotColor'));
        /** 小格颜色 */
        let gridColorMini = String(this.currentPageAttr.get('gridColorMini'));
        /** 大格颜色 */
        let gridColorMax = String(this.currentPageAttr.get('gridColorMax'));
        /** 格栅宽度 */
        let gridWidth = Number(this.currentPageAttr.get('gridWidth'));
        /** 格栅宽度 */
        let gridHeight = Number(this.currentPageAttr.get('gridHeight'));

        // 无
        if (gridModel === 1 /*无格栅*/) {
            gridStyleVal = `position: absolute;top: 0px;left: 0px;border:1px solid rgb(255,255,255); background-color: ${canvasBackColor};width: ${canvasWidth * canvasScale}px; height:${canvasHeight * canvasScale}px;z-index: -1;`;
        }

        // 点格栅
        if (gridModel === 2 /*点格栅*/) {
            gridStyleVal = `position: absolute;top: 0px;left: 0px;width: ${canvasWidth * canvasScale}px;height:${canvasHeight * canvasScale}px;background:${canvasBackColor};background-image:linear-gradient(${canvasBackColor} ${gridSpace * canvasScale - 1}px,transparent 0),linear-gradient(90deg,${gridDotColor} 1px,transparent 0);background-size:${gridSpace * canvasScale}px ${gridSpace * canvasScale}px,${gridSpace * canvasScale}px ${gridSpace * canvasScale}px;z-index: -1;`;
        }

        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // 格栅模式选项:3-方格;
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        if (gridModel === 3 /*方格*/) {
            /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            // 🐸 ★ 格栅模式选项:3-方格;|格栅样式选项:1-像素尺寸;
            /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            if (gridStyle == 1/*像素尺寸*/) {
                gridStyleVal = `position: absolute;top: 0px;left: 0px; background-color: ${canvasBackColor};width: ${canvasWidth * canvasScale}px; height:${canvasHeight * canvasScale}px;background-image:linear-gradient(0deg, ${gridColorMini} 1px, transparent 0),linear-gradient(90deg, ${gridColorMini}, 1px, transparent 0),linear-gradient(0deg, ${gridColorMax} 2px, transparent 0),linear-gradient(90deg, ${gridColorMax} 2px, transparent 0);background-size:${gridSpace * canvasScale}px ${gridSpace * canvasScale}px,${gridSpace * canvasScale}px ${gridSpace * canvasScale}px,${gridSpace * 10 * canvasScale}px ${gridSpace * 10 * canvasScale}px,${gridSpace * 10 * canvasScale}px ${gridSpace * 10 * canvasScale}px;z-index: -1;`;
            }
            /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            // 🐸 ★ 格栅模式选项:3-方格;|格栅样式选项:3-均分画布;
            /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            if (gridStyle == 2/*均分画布*/) {
                gridStyleVal = `position: absolute;top: 0px;left: 0px; background-color: ${canvasBackColor};width: ${canvasWidth * canvasScale}px; height:${canvasHeight * canvasScale}px;background-image:linear-gradient(0deg, ${gridColorMini} 1px, transparent 0),linear-gradient(90deg, ${gridColorMini}, 1px, transparent 0),linear-gradient(0deg, ${gridColorMax} 2px, transparent 0),linear-gradient(90deg, ${gridColorMax} 2px, transparent 0);background-size:${gridWidth * canvasScale}px ${gridHeight * canvasScale}px,${gridWidth * canvasScale}px ${gridHeight * canvasScale}px,${gridWidth * 10 * canvasScale}px ${gridHeight * 10 * canvasScale}px,${gridWidth * 10 * canvasScale}px ${gridHeight * 10 * canvasScale}px;z-index: -1;`;
            }
            /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            // 🐸 ★ 格栅模式选项:3-方格;|格栅样式选项:3-按宽高均分画布;
            /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            if (gridStyle == 3/*按宽高均分画布*/) {
                gridStyleVal = `position: absolute;top: 0px;left: 0px; background-color: ${canvasBackColor};width: ${canvasWidth * canvasScale}px; height:${canvasHeight * canvasScale}px;background-image:linear-gradient(0deg, ${gridColorMini} 1px, transparent 0),linear-gradient(90deg, ${gridColorMini}, 1px, transparent 0),linear-gradient(0deg, ${gridColorMax} 2px, transparent 0),linear-gradient(90deg, ${gridColorMax} 2px, transparent 0);background-size:${gridWidth * canvasScale}px ${gridHeight * canvasScale}px,${gridWidth * canvasScale}px ${gridHeight * canvasScale}px,${gridWidth * 10 * canvasScale}px ${gridHeight * 10 * canvasScale}px,${gridWidth * 10 * canvasScale}px ${gridHeight * 10 * canvasScale}px;z-index: -1;`;
            }
        }

        let Hgrid = document.querySelector('#h-grid') as HTMLDivElement
        //设置格栅样式
        Hgrid.setAttribute("style", gridStyleVal);
    };

    /** 获取UUID */
    getUUID = (): string => {
        return (((1 + Math.random()) * 0x100000000) | 0).toString(16).substring(1);
    }

    /** 获取元素计数 */
    getElementCont(Key: string) {
        console.log("黄传鸿组态-获取元素计数");
        console.log(this.elementCont.get(Key));
        return this.elementCont.get(Key);
    };

    /** 设置元素计数 */
    setElementCont(Key: string, newVal: number) {
        console.log("黄传鸿组态-设置元素计数");
        this.elementCont.set(Key, newVal);
        return this.elementCont.get(Key);
    };

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 计算
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    /** 计算光标点
     * @参数_MousePoint 鼠标点
     * @返回 0_窗体坐标[x,y];
     * @返回 2_真实坐标[x,y];
     */
    calcCursor = (x: number, y: number) => {
        // console.log("㊣ 计算光标点");

        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // 🐸 转储 建立参数
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        /** 画布缩放 */
        let canvasScale = Number(this.currentPageAttr.get('canvasScale'));
        /** 转换坐标 */
        let ConvertCoordinate = {
            x: x * (1 / canvasScale),
            y: y * (1 / canvasScale),
        };
        // console.log("转换坐标:" );
        /** 光标捕捉x */
        let CatchX = ConvertCoordinate.x;
        /** 光标捕捉y */
        let CatchY = ConvertCoordinate.y;
        /** 捕捉格栅宽度 */
        let catchWidthVal = 1;
        /** 捕捉格栅高度 */
        let catchHeightVal = 1;
        /** 捕捉区域 */
        let catchRange = Number(this.currentPageAttr.get('catchRange'));
        /** 格栅宽度 */
        let gridWidth = Number(this.currentPageAttr.get('gridWidth'));
        /** 格栅高度 */
        let gridHeight = Number(this.currentPageAttr.get('gridHeight'));
        /** 捕捉状态 */
        let isCatch = Boolean(this.currentPageAttr.get('isCatch'));
        /** 画布宽度 */
        let canvasWidth = Number(this.currentPageAttr.get('canvasWidth'));
        /** 画布高度 */
        let canvasHeight = Number(this.currentPageAttr.get('canvasHeight'));
        /** 格栅间距 */
        let gridSpace = Number(this.currentPageAttr.get('gridSpace'));
        /** 格栅模式选项:1-无格栅;2-点格栅;3-方格; */
        let gridModel = Number(this.currentPageAttr.get('gridModel'));
        /** 格栅样式选项:1-像素尺寸;2-均分画布;3-按宽高均分画布;*/
        let gridStyle = Number(this.currentPageAttr.get('gridStyle'));

        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // 格栅模式选项:1-无格栅;
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        if (gridModel === 1/*无格栅*/) {
            catchWidthVal = catchRange;
            catchHeightVal = catchRange;
        }

        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // 格栅模式选项:2-点格栅;
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        if (gridModel === 2/*点格栅*/) {
            catchWidthVal = gridSpace;
            catchHeightVal = gridSpace;
        }

        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // 🐸 格栅模式选项:3-方格;
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        if (gridModel === 3/*方格*/) {

            /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            // 🐸 ★ 格栅模式选项:3-方格;|格栅样式选项:1-像素尺寸;
            /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            if (gridStyle === 1/*像素尺寸*/) {
                catchWidthVal = gridSpace;
                catchHeightVal = gridSpace;
            }

            /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            // 🐸 ★ 格栅模式选项:3-方格;|格栅样式选项:2-均分画布;
            /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            if (gridStyle === 2/*均分画布*/) {
                catchWidthVal = canvasWidth / gridSpace;
                catchHeightVal = canvasHeight / gridSpace;
            }

            /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            // 🐸 ★ 格栅模式选项:3-方格;|格栅样式选项:3-按宽高均分画布;
            /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
            if (gridStyle === 3/*按宽高均分画布*/) {
                catchWidthVal = gridWidth;
                catchHeightVal = gridHeight;
            }
        }

        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // 🐸 捕捉
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        /**★ 判断光标捕捉状态 */
        if (isCatch) {

            try {
                //捕捉X
                let GridX = String(ConvertCoordinate.x / catchWidthVal);
                // console.log(`${GridX}`);
                let SplitX = GridX.split(".");
                // console.log(`SplitX=${SplitX}`);
                let SliceX = Number(SplitX[1].slice(0, 1));
                // console.log(`SliceX==${SliceX}`);
                if (SliceX > 5) {
                    CatchX = Number(SplitX[0]) * catchWidthVal + catchWidthVal;
                } else {
                    CatchX = Number(SplitX[0]) * catchWidthVal;
                }

                //捕捉Y
                let GridY = String(ConvertCoordinate.y / catchHeightVal);
                // console.log(`${GridX}`);
                let SplitY = GridY.split(".");
                // console.log(`SplitX=${SplitX}`);
                let SliceY = Number(SplitY[1].slice(0, 1));
                // console.log(`SliceY==${SliceY}`);
                if (SliceY > 5) {
                    CatchY = Number(SplitY[0]) * catchHeightVal + catchHeightVal;
                } else {
                    CatchY = Number(SplitY[0]) * catchHeightVal;
                }
            } catch (error) {
                // console.log(error);
            }
        } else {
            CatchX = ConvertCoordinate.x;
            CatchY = ConvertCoordinate.y;
        }

        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // 🐸 精度
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        /**★ 使用精度 */
        let useAccuracy = String(this.currentPageAttr.get('pageAccuracy'));
        /**★ 精度坐标 */
        let AccuracyCoordinate = { x: 0, y: 0 };
        /**★ 精度 */
        if (useAccuracy === "0级") {
            AccuracyCoordinate = {
                x: parseInt(String(CatchX)),
                y: parseInt(String(CatchY)),
            };
        }
        if (useAccuracy === "1级") {
            AccuracyCoordinate = {
                x: Number(CatchX.toFixed(1)),
                y: Number(CatchY.toFixed(1)),
            };
        }
        if (useAccuracy === "2级") {
            AccuracyCoordinate = {
                x: Number(CatchX.toFixed(2)),
                y: Number(CatchY.toFixed(2)),
            };
        }
        if (useAccuracy === "3级") {
            AccuracyCoordinate = {
                x: Number(CatchX.toFixed(3)),
                y: Number(CatchY.toFixed(3)),
            };
        }
        if (useAccuracy === "4级") {
            AccuracyCoordinate = {
                x: Number(CatchX.toFixed(4)),
                y: Number(CatchY.toFixed(4)),
            };
        }
        if (useAccuracy === "5级") {
            AccuracyCoordinate = {
                x: Number(CatchX.toFixed(5)),
                y: Number(CatchY.toFixed(5)),
            };
        }
        if (useAccuracy === "6级") {
            AccuracyCoordinate = {
                x: Number(CatchX.toFixed(6)),
                y: Number(CatchY.toFixed(6)),
            };
        }
        if (useAccuracy === "7级") {
            AccuracyCoordinate = {
                x: Number(CatchX.toFixed(7)),
                y: Number(CatchY.toFixed(7)),
            };
        }
        if (useAccuracy === "8级") {
            AccuracyCoordinate = {
                x: Number(CatchX.toFixed(8)),
                y: Number(CatchY.toFixed(8)),
            };
        }

        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // 🐸 真实坐标
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        this.coordinate.x = AccuracyCoordinate.x;
        this.coordinate.y = AccuracyCoordinate.y;
        // console.log(this.coordinate);
    }
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 画布鼠标
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /** 鼠标按下*/
    private canvasMouseDown = (e: MouseEvent) => {
        console.log("鼠标按下")
        e.preventDefault();
        e.stopPropagation();
        /**◆ 计算光标点 */
        this.calcCursor(e.offsetX, e.offsetY);
        if (e.button === 0) {
            console.log("鼠标左键按下")
            this.mouseLeftKeyState = 1;
            this.calcCursor(e.offsetX, e.offsetY);
        }
        if (e.button === 1) {
            console.log("鼠标点了滚轮")
            this.mouseWheelKeyState = 1;
            this.workState = 60
            let tempCoordinate = JSON.parse(JSON.stringify(this.coordinate)) as CoordinateType

        }
        if (e.button === 2) {
            console.log("鼠标右键按下")
            this.mouseRightKeyState = 1;
        }

    };

    /** 鼠标右键抬起*/
    private canvasContextmenu = (e: MouseEvent) => {
        console.log("鼠标右键抬起")
        e.preventDefault();
        e.stopPropagation();
        this.mouseLeftKeyState = 0;//鼠标左键状态
        this.mouseRightKeyState = 0;//鼠标右键状态
        this.mouseWheelKeyState = 0;//鼠标滚轮键状态
        this.currentPageAttr.set('isShowCursor', true)
        this.calcCursor(e.offsetX, e.offsetY);
    };

    /** 鼠标抬起*/
    private canvasMouseUp = (e: MouseEvent) => {
        console.log("鼠标抬起")
        e.preventDefault();
        e.stopPropagation();
        this.mouseLeftKeyState = 0;//鼠标左键状态
        this.mouseRightKeyState = 0;//鼠标右键状态
        this.mouseWheelKeyState = 0;//鼠标滚轮键状态
        this.workState = 0
        this.calcCursor(e.offsetX, e.offsetY);
    };

    /** 鼠标移动*/
    private canvasMouseMove = (e: MouseEvent) => {
        // console.log("鼠标移动")
        e.preventDefault();
        e.stopPropagation();
        /**◆ 计算光标点 */
        this.calcCursor(e.offsetX, e.offsetY);
        //🚩 ★ 选择
        if (this.workState === 10/*选择*/) { }

        if (this.workState === 60/*画布平移*/) {
            if (this.mouseWheelKeyState === 1) {
                this.canvasTranslate();//画布平移
            }

        }

        /** 显示光标 */
        let isShowCursor = Boolean(this.currentPageAttr.get('isShowCursor'));
        if (isShowCursor) {
            this.drawCursor();//绘制-光标
        }

    };

    /** 鼠标滚轮*/
    private canvasMouseWheel = (e: any) => {
        console.log("鼠标滚轮")
        e.preventDefault();
        e.stopPropagation();
        if (e.wheelDelta > 0) {
            this.currentPageAttr.set('canvasScale', this.currentPageAttr.get('canvasScale') + 0.05)
        }
        if (e.wheelDelta < 0) {
            this.currentPageAttr.set('canvasScale', this.currentPageAttr.get('canvasScale') - 0.05)
        }
        /** 画布缩放 */
        // let canvasScale = this.currentPageAttr.get('canvasScale');
        // console.log(canvasScale)
        this.changeCanvasSize();//更改画布尺寸
    };
}

export const Hzt = new HCHHZT()